<template>
	<view class="money-manage">
		<view class="bc1"> </view>
		<view class="top">
			<view class="top-title">账户余额(元)</view>
			<view class="top-money">{{money || 0}}</view>
			<navigator url="./withdrawal/withdrawal" class="top-btn">去提现</navigator>
		</view>
		<view class="tab-page">
			<view class="tab">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" bar-width="120" @change="change" bg-color="#fff" style="padding: 10rpx 0;"></u-tabs>
			</view>
			<view class="page-content">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="scrolltolower()">
					<view v-for="(item,index) in recordList" :key="index">
						<view class="item">
							<view class="item-icon">
								<u-icon name="rmb-circle" color="#2ba4f7" size="60"></u-icon>
							</view>
							<view class="item-text">
								<view class="item-left">
									<view class="left-tocard">提现-到{{item.bankType }} ( {{ item.cardNum | idcard }} )</view>
									<view class="left-date">{{$u.timeFormat(item.creationTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
								</view>
								<view class="item-right">{{item.tradeAmount}}</view>
							</view>
						</view>
					</view>
					<view class="bootom-box">
						<load-more :visible="loadMore "></load-more>
						<om-nomore :visible="noMoreFlag && !noData1" bgcolor="#f9f9f9"></om-nomore>
					</view>
					<view class="no-data" v-if="noData1">
						<tui-no-data :fixed="false" imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/Open_source_project/mine/empty_bg.png" >暂无数据</tui-no-data>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{name: '审核中'}, {name: '审核通过'}, {name: '审核失败'}],
				money:0,              //账户余额
				recordList:[],        //提现记录
				current: 0,           // 指定第一页为初始页面
				currentPage: 1,       //分页
				total: 0,             //数据总数
				loadMore: false,      //数据加载中
				noMoreFlag: false,    //没有更多数据了
				noData1: false,       //没有数据
				typeId: 1,            //提现记录状态1-到账 2-提现 3-失败
			};
		},
		//只展示银行卡后四位
		filters: {
			idcard(str){
				str += '';
				return str.substr(str.length-4)
			}
		},
		onShow() {
			this.getMoney();
			this.clear();
			this.getRecord()
		},
		methods: {
			//获取账户余额
			getMoney(){
				this.$http.post('/api/auth/business/merchAcc',this.$store.state.userInfo.id).then(res => {
					this.money = res.data.busiBalance
				})
			},
			//顶部section改变
			change(index) {
				this.current = index;
				this.clear();
				this.getRecord()
			},
			//获得提现记录数据
			getRecord(){
				this.loadMore = true;
				//查询不同交付状态的订单     
				this.typeId = this.current == 0 ? 2 : this.current == 1 ? 1 : 3;
				this.$http.post('/api/auth/business/BankRecordApi/recList',{busiId: this.$store.state.userInfo.id,typeId: this.typeId,currentPage:this.currentPage}).then(res => {
					this.loadMore = false;
					this.total = res.data.total;
					if(this.total == 0) return this.noData1 = true;
					
					this.recordList = this.recordList.concat(res.data.rows)
				})
			},
			//切换tab，重新请求，需清空原有数据
			clear(){
				this.recordList = [];
				this.noData1 = false;
				this.noMoreFlag = false;
				this.currentPage = 1;
				this.total = 0
			},
			//触底
			scrolltolower(){
				if(this.total == this.recordList.length) return this.noMoreFlag = true;
				this.currentPage++;
				this.getRecord()
			}
		},
	}
</script>

<style lang="scss"scoped>
.money-manage{
	position: relative;
	.bc1{
		width: 750rpx;
		height: 40px;
		background-color: #2ba4f7;
	}
	.top{
		position: absolute;
		top: 15rpx;
		left: 25rpx;
		padding: 20rpx;
		width: 700rpx;
		height: 330rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #fff;
		.top-title{
			padding: 10rpx 0;
			font-size: 13px;
			color: #797979;
		}
		.top-money{
			height: 120rpx;
			line-height: 120rpx;
			font-size: 26px;
			font-weight: 700;
		}
		.top-btn{
			margin: 10rpx auto 0;
			width: 90%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 15px;
			border-radius: 40rpx;
			background-color: #2ba4f7;
		}
	}
	
	.tab-page{
		padding-top: 290rpx;
		.tab{
			position: fixed;
			width: 100%;
			background-color: #fff;
		}
		.page-content{
			position: relative;
			top: 105rpx;
			background-color: #fff;
			.scroll-view{
				height: 730rpx;			
			}
		}
	}

	.item{
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		.item-icon{
			margin-right: 30rpx;
		}
		.item-text{
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0;
			width: 100%;
			border-bottom: 1px solid #e9e9e9;
			.item-left{
				.left-tocard{
					font-size: 16px;
					margin-bottom: 15rpx;
				}
				.left-date{
					color:#9e9e9e;
				}
			}
			.item-right{
				margin: 20rpx 20rpx 0 0;
				font-size: 20px;
				font-weight: 700;
				color:#000000;
			}
		}
	}
}

.bootom-box{
	height: 160rpx;
}
</style>
